<template>
    <CommonBackground>
        <template slot="form">
          <div class="form">
            <div class="form-down">
              <h2 class="form-down-title">已有账户?</h2>
              <div class="form-down-introduce">
                如果您已经有一个账户，<br/>
                恭喜您！请点击下方登录按钮，<br/>
                并开始您的工作。<br/>
              </div>
              <el-button @click="login('/login')">登录</el-button>
            </div>
            <div class="form-up">
              <h2 class="form-up-title">
                <span class="sign">注</span>
                <span class="up">册</span>
              </h2>
              <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="user">
                  <el-input v-model="ruleForm.user" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="ruleForm.password" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="agin">
                  <el-input v-model="ruleForm.agin" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button  icon="el-icon-right"></el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
    </CommonBackground>
</template>
<script>
import CommonBackground from '@/components/commonBackground'
import routerPush from '@/utils/routerPush'
export default {
  name: 'Register',
  components: {
    CommonBackground
  },
  data () {
    return {
      ruleForm: {
        user: '',
        password: '',
        agin: ''
      },
      rules: {

      }
    }
  },
  methods: {
    login(path){
      routerPush(path)
    }
  }
}
</script>
<style lang="less" scoped>
.form{
  margin-top: 10%;
  width: 402px;
  min-width: 402px;
  height: 374px;
  margin-right: 40%;
  float: right;
  position: relative;
  font-style: normal;
}
.form-down{
  position: absolute;
  background: rgba(0,0,0,.6);
  width: 100%;
  height: 100%;
  color: @color_white;
  padding: 10% 7%;
  box-sizing: border-box;
}
.form-down-introduce{
  margin-top: 30px;
  margin-bottom: 30px;
  color: @text_color_2;
  word-spacing: @english_word_spacing;
  line-height: 34px;
}
.form-down>.el-button{
  background: @transparent;
  color: @text_color_2;
  border-color: @border_color_2;
  opacity: 0.8;
}
.form-down>.el-button:hover{
  opacity: 1;
}
.form-down>.el-button:active{
  opacity: 0.8;
}

.form-up{
  position: absolute;
  right: -69%;
  width: 80%;
  top: 20%;
  padding: 7%;
  background: rgba(255,255,255,.1);
  height: 70%;
  box-shadow: 11px -11px 3px @color_white;
}
.form-up-title>.sign{
  color: @color_white;
  margin-right: 56px;
}
.form-up-title>.up{
  color: @text_color_2;
}
.el-form{
  margin-top: 20px;
}
.el-button{
    width: 80px;
    height: 40px;
    font-size: 14px;
}
/deep/ .el-form-item__label{
  color: @color_white;
  font-weight: bolder;
  width: 76px!important;
}
/deep/ .el-input__inner{
  color: @text_color_2;
}
/deep/ .el-form-item__content{
  width: calc(90% - 76px);
  background: none;
}
/deep/ .el-form .el-button{
  color: @text_color_2;
  background: linear-gradient(to bottom, @color_white 40%, @border_color_2);
  font-size: 20px;
  opacity: 0.8;
  border: none;
}
/deep/ .el-form .el-button:hover{
  color: @color_green_2;
  opacity: 1;
}
/deep/ .el-form .el-button:active{
  opacity: 0.8;
}
/deep/ .el-form-item:nth-child(4){
  margin-top: 30px;
  .el-form-item__content{
    width: 100%;
  }
  .el-button{
    margin-left: 50%;
    transform: translate(-50%);
  }
}
</style>
